<template>
  <div class="category">
    <van-grid :column-num="5" :border="false">
      <van-grid-item
        v-for="(item, index) in CategoryData"
        :key="index"
        :icon="item.icon"
        :text="item.name"
      />
    </van-grid>
    <div class="_1GWVJT2OLFMK_zt-Pdonb">附近商家</div>
    <div class="tab" ref="tab">
      <div class="_22YSgYsVZZ33WpdC5csPhH">
        <ul class="CpTpAqo273nQXSG__3F68">
          <li class="_3E-rqFFoOgqpMgyxWrzStr">
            <!-- react-text: 170 -->综合排序<!-- /react-text --><i
              class="_1vwBiUqoRa0l1lOafmns1x"
            ></i>
          </li>
          <li class="_3E-rqFFoOgqpMgyxWrzStr">销量最高</li>
          <li class="_3E-rqFFoOgqpMgyxWrzStr">距离最近</li>
          <li class="_3E-rqFFoOgqpMgyxWrzStr">
            <!-- react-text: 175 -->筛选<!-- /react-text --><i
              class="_1zw9qO_fPmPD7jcUtNfUJT"
            ></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {};
  },
  //事件处理器
  methods: {},
  // 计算属性
  computed: {
    CategoryData() {
      // console.log(this.$store.state.CategoryData)
      return this.$store.state.CategoryData;
    },
  },
  //侦听器
  watch: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    window.addEventListener("scroll", () => {
      //  console.log(document.documentElement.scrollTop)
      if (document.documentElement.scrollTop > 210) {
        this.$refs.tab.style.position = "fixed";
        this.$refs.tab.style.top = "50px";
      } else {
        this.$refs.tab.style.cssText = "";
      }
    });
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.category {
  width: 100%;
  margin-top: 3.125rem;
}
._1GWVJT2OLFMK_zt-Pdonb {
  font-size: 17px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1.4;
  margin-top: 15px;
  margin-bottom: 5px;
}
._1GWVJT2OLFMK_zt-Pdonb::before {
  content: "";
  height: 1px;
  width: 60px;
  background: #666;
  margin-right: 3px;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  display: inline-block;
}
._1GWVJT2OLFMK_zt-Pdonb::after {
  content: "";
  height: 1px;
  width: 60px;
  background: #666;
  margin-left: 3px;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  display: inline-block;
}
.tab {
  width: 100%;
  border-top: #f6f6f6 solid 0.0625rem;
  border-bottom: #f6f6f6 solid 0.0625rem;
  z-index: 999;
  background: white;
}
._22YSgYsVZZ33WpdC5csPhH .CpTpAqo273nQXSG__3F68 {
  list-style: none;
  height: 100%;
}
._22YSgYsVZZ33WpdC5csPhH .CpTpAqo273nQXSG__3F68 ._3E-rqFFoOgqpMgyxWrzStr {
  position: relative;
  display: inline-block;
  width: 25%;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #666;
}
._22YSgYsVZZ33WpdC5csPhH
  .CpTpAqo273nQXSG__3F68
  ._3E-rqFFoOgqpMgyxWrzStr
  ._1vwBiUqoRa0l1lOafmns1x {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 3px 5px;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  -webkit-transform: rotateZ(-135deg);
  transform: rotateZ(-135deg);
  margin-top: -10px;
}
</style>
